<template>
  <div class="view-container" id="position">
   <!-- <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>职位管理</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-button type="danger" icon="el-icon-plus" @click="openEditDialog(false)">添加</el-button>
          </div>
          &lt;!&ndash;搜索&ndash;&gt;
          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          &lt;!&ndash;按标题查询&ndash;&gt;
          <div class="header-form-item title-search">
            <el-input v-model.trim="position.positionName" clearable @input="fetchData" placeholder="职位名称" />
          </div>
        </div>
      </div>

    </header>-->

    <list-header
      :title="'职位管理'"
      :delText="'删除'"
      :delLoading="delLoading"
      @del="delOne"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
      <div class="header-form-item title-search" slot="search-item-1">
        <el-input v-model.trim="position.positionName" clearable @input="AntiShake" placeholder="职位名称" />
      </div>
      <!--<div class="header-form-item title-search" slot="search-item-1">
        <el-input clearable v-model.trim="user.userNickname" @input="AntiShake" placeholder="用户昵称" tabindex="2"/>
      </div>
      <div class="header-form-item title-search" slot="search-item-2">
        <el-input clearable v-model.trim="user.userName" @input="AntiShake" placeholder="用户名" tabindex="1"/>
      </div>-->
    </list-header>

    <section class="table-container">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="positionName" label="职位名称" sortable/>
<!--        <el-table-column prop="remark" label="备注"  sortable/>-->
        <el-table-column prop="sortIndex" label="序号" width="100" align="center" sortable/>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>
    <position-common ref="save-page" @update="update"></position-common>
  </div>
</template>

<script>
  import positionCommon from './common/positionCommon'
  import positionAPI from '@/api/system/position'
  import ListHeader from '@/common/ListHeader'
  import listMixin from '@/mixin/listMixin'
  export default {
    name: 'positionList',
    components:{positionCommon,ListHeader},
    mixins: [listMixin],
    data() {
      return {
        position:{
          positionId:'',
          positionName:'',
          sortIndex:'',
          // remark:''
        },
        mixinParams: {
          propertyName: 'positionId',
          API: positionAPI,
        },
      }
    },
    created() {
    },
    computed:{
    },
    methods: {
      update(flag){
        this.fetchData()
      },
      fetchData() {
        positionAPI.getList(this.position.positionName,this.page).then(res => {
          console.log('positionAPI.getList',res)
          this.page.total = res.total
          this.tableData = res.records
        }).catch(err => {
          console.log(err)
        })
      },
    }
  }
</script>

<style lang="scss">
  #position {
    padding: 0;
    .el-dialog {
      width: 500px;
    }
  }

</style>
<style lang="scss" scoped>
  .view-container {
    padding: 0;
  }
</style>
